<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div v-loading="loading">

      <el-form v-loading="loading" label-position="right" label-width="120px" >
        <el-form-item label="短信厂商">
            <el-select v-model="sms_vender" placeholder="请选择厂商">
                <el-option label="腾讯云短信" value="tencent"></el-option>
                <el-option label="阿里云短信" value="alibaba"></el-option>
                <el-option label="云片短信" value="yunpian"></el-option>
            </el-select>
        </el-form-item>

        <template v-if="sms_vender == 'tencent'">
            <el-form-item label="腾讯云AccessKeyId">
                <el-input v-model="sms_access_key_id" style="width: 350px" min="32" max="32" />
            </el-form-item>

            <el-form-item label="腾讯云AccessKeySecret">
                <el-input v-model="sms_access_key_secret" style="width: 350px" min="32" max="32" />
            </el-form-item>

            <el-form-item label="腾讯云SdkAppId">
                <el-input v-model="sms_sdk_app_id" style="width: 350px" min="32" max="32" />
            </el-form-item>

            <el-form-item label="腾讯云短信模板id">
                <el-input v-model="sms_code_tpl" style="width: 350px" min="32" max="32" />
            </el-form-item>

            <el-form-item label="腾讯云短信签名">
                <el-input v-model="sms_sign" style="width: 350px" min="32" max="32" />
            </el-form-item>
        </template>

        <template v-if="sms_vender == 'alibaba'">
            <el-form-item label="阿里云AccessKeyId">
                <el-input v-model="sms_access_key_id" style="width: 350px" min="32" max="32" />
            </el-form-item>

            <el-form-item label="阿里云AccessKeySecret">
                <el-input v-model="sms_access_key_secret" style="width: 350px" min="32" max="32" />
            </el-form-item>

            <el-form-item label="阿里云短信模板id">
                <el-input v-model="sms_code_tpl" style="width: 350px" min="32" max="32" />
            </el-form-item>

            <el-form-item label="阿里云短信签名">
                <el-input v-model="sms_sign" style="width: 350px" min="32" max="32" />
            </el-form-item>
        </template>

        <template v-if="sms_vender == 'yunpian'">
            <el-form-item label="云片短信apikey">
                <el-input v-model="sms_access_key_id" style="width: 350px" min="32" max="32" />
            </el-form-item>

            <el-form-item label="云片短信模板id">
                <el-input v-model="sms_code_tpl" style="width: 350px" min="32" max="32" />
            </el-form-item>
        </template>

        <el-form-item>
            <el-button type="primary" :disable="loading" size="small" icon="el-icon-check"
                @click="submitSmsConfig">保存短信设置</el-button>
        </el-form-item>

        <el-form-item label="发送测试">
            <el-input min="11" max="11" size="mini" v-model="sms_test_mobile" style="width: 350px" />
            <el-button :disabled="!sms_test_mobile.length || smsLoading" :loading="smsLoading" @click="testSmsHandle"
                size="mini" icon="el-icon-s-promotion">发送</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>

<script>
import { updateSmsInfo } from "@/api/myconfig";
import { sendSmsCode } from "@/api/user";
export default {
    name: 'sysinfo',
    props: {
        config: { type: Object, default: null },
    },
    watch: {
        config: {
            deep: true,
            handler(val, oldVal) {
                this.sms_vender = val.sms_vender;
                this.sms_access_key_id = val.sms_access_key_id;
                this.sms_access_key_secret = val.sms_access_key_secret;
                this.sms_sdk_app_id = val.sms_sdk_app_id;
                this.sms_code_tpl = val.sms_code_tpl;
                this.sms_sign = val.sms_sign;

            }
        }
    },
    data() {
        return {
            sms_test_mobile: '',
            smsLoading: false,

            sms_vender: '',
            sms_access_key_id: '',
            sms_access_key_secret: '',
            sms_sdk_app_id: '',
            sms_code_tpl: '',
            sms_sign: '',

            loading: false,
        }
    },

    methods: {
        submitSmsConfig: function () {
            if (!this.sms_vender) {
                this.$message.error("请选择短信厂商");
                return;
            }



            this.loading = true
            updateSmsInfo({
                sms_vender: this.sms_vender,
                sms_access_key_id: this.sms_access_key_id,
                sms_access_key_secret: this.sms_access_key_secret,
                sms_sdk_app_id: this.sms_sdk_app_id,
                sms_code_tpl: this.sms_code_tpl,
                sms_sign: this.sms_sign,
            }).then(resp => {
                this.loading = false
                if (resp.code != 0) {
                    return
                }
                this.$emit("updateConfig")
                this.$message.success("保存成功")
            })
        },

        testSmsHandle: function () {
            // 发送一个测试短信
            if (this.sms_test_mobile.length != 11) {
                this.$message.error("手机号长度错误");
                return false;
            }
            this.smsLoading = true;
            sendSmsCode(this.sms_test_mobile).then((resp) => {
                this.smsLoading = false;
                if (resp.status == 0) {
                    this.$message.success("测试验证码短信已发送，请检查手机");
                }
            });
        },

    },

}
</script>

<style></style>
